<template>
  <div class="resume-section">
    <h2>{{ section.title }}</h2>
    <div v-for="(item, index) in section.items" :key="index" class="section-item">
      <p v-if="item.label"><strong>{{ item.label }}：</strong>{{ item.value }}</p>
      <p v-else>{{ item.value }}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  section: {
    type: Object,
    required: true,
    default: () => ({ title: '', items: [] })
  }
});
</script>

<style scoped>
.resume-section {
  margin-bottom: 25px;
}
.resume-section h2 {
  font-size: 18px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
  color: #333;
}
.section-item {
  margin: 10px 0;
  line-height: 1.6;
}
.section-item p {
  margin: 0;
}
.section-item strong {
  color: #333;
  font-weight: 600;
}
</style>